<script setup>
import { ref, onMounted } from 'vue'
import { useMenuStore } from '@/stores/menuStore.js'
import MenuEdit from '@/views/system/MenuEdit.vue'
import MenuTree from '@/views/system/MenuTree.vue'
import { ElMessageBox } from 'element-plus'

import {MenuApi} from "@/api/menu/index.js";


const menuStore = useMenuStore()
const menuEditRef = ref(null) // 菜单编辑组件引用
const tableData = ref([])     // 表格数据
const searchForm = ref({      // 搜索表单
  name: '',
  path: ''
})
const viewType = ref('list') // 'list' 或 'tree'
const detailDialogVisible = ref(false)
const currentDetail = ref({})
const currentDetail1 = ref({})


// 初始化加载数据
onMounted(() => {
  // 同时加载列表和树形数据
  Promise.all([
    menuStore.getMenuList(),
    menuStore.loadFullMenuTree()
  ]).then(() => {
    tableData.value = menuStore.menuList
    console.log("tableData表中的数据",tableData.value)
  })
  // menuStore.getMenuList().then(() => {
  //   tableData.value = menuStore.menuList;
  //   console.log("tableData表中的数据",tableData.value)
  // })
})

// 加载菜单列表
const loadMenuList = async () => {
  await menuStore.getMenuList(searchForm.value)
  tableData.value = menuStore.menuList
}

// 页码变化处理
const handleCurrentChange = (val) => {
  menuStore.updatePageInfo({ page: val })
  loadMenuList()
}

// 【新增】查看详情方法
const handleDetail = async (id) => {
  const res = await MenuApi.detail(id)
  console.log("res的数据",res)
  currentDetail.value = res.data.data
  console.log("res.data.data的数据",res.data.data)

  currentDetail1.value = res.data.data.children ? res.data.data.children : null
  console.log("子菜单的数据",currentDetail1.value)
  detailDialogVisible.value = true
}

// 编辑菜单
const handleEdit = (menu) => {
  menuEditRef.value.show(menu)
}

// 创建菜单
const handleCreate = () => {
  menuEditRef.value.show()
}

// 删除菜单
const handleDelete = async (id) => {
  try {
    await ElMessageBox.confirm('确定要删除该菜单吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    await menuStore.deleteMenu(id)
  } catch (error) {
    console.log('取消删除', error)
  }
  loadMenuList()
}

// 搜索
const handleSearch = () => {
  menuStore.updatePageInfo({ page: 1 })
  loadMenuList()
}

// 重置搜索
const handleReset = () => {
  searchForm.value = { name: '', path: '' }
  handleSearch()
}
</script>

<template>
  <div class="menu-container">

    <!-- 【新增】视图切换工具栏 -->
    <el-card shadow="never" class="toolbar-card">
      <el-radio-group v-model="viewType">
        <el-radio-button label="list">列表视图</el-radio-button>
        <el-radio-button label="tree">树形视图</el-radio-button>
      </el-radio-group>
    </el-card>

    <!-- 搜索表单 -->
    <el-card shadow="never" class="search-card">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="菜单名称">
          <el-input v-model="searchForm.name" placeholder="请输入菜单名称" clearable />
        </el-form-item>
        <el-form-item label="路由路径">
          <el-input v-model="searchForm.path" placeholder="请输入路由路径" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="primary" @click="handleCreate">新增菜单</el-button>
        </el-form-item>
      </el-form>
    </el-card>


    <!-- 【修改】根据视图类型显示不同内容 -->
    <template v-if="viewType === 'list'">
      <div class="menutable">
        <!-- 菜单表格 -->
        <el-table :data="tableData" row-key="id" border>
          <el-table-column prop="id" label="菜单ID" width="100" align="center"/>
          <el-table-column prop="name" label="菜单名称" width="160" align="center"/>
<!--          <el-table-column prop="icon" label="菜单图标" width="120"align="center">-->
<!--            <template #default="{ row }">-->
<!--              <i :class="row.icon" v-if="row.icon"></i>-->
<!--              <span v-else>-</span>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="path" label="路由路径" width="180" align="center"/>
          <el-table-column prop="parentId" label="父菜单ID" width="80" align="center"/>
          <el-table-column prop="sort" label="排序" width="80" align="center"/>
          <!-- 在表格列中添加隐藏状态列 -->
          <el-table-column prop="hidden" label="是否隐藏" width="100" align="center">
            <template #default="{ row }">
              <el-tag :type="row.hidden ? 'danger' : 'success'">
                {{ row.hidden ? '隐藏' : '显示' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" width="220"align="center" />
          <el-table-column label="操作" width="280" fixed="right"align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleDetail(row.id)">菜单详情</el-button>
              <el-button type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
              <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template v-else>
      <MenuTree :data="menuStore.menuTree" @edit="handleEdit" @detail="handleDetail" />
    </template>

    <!-- 【新增】详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="菜单详情" width="50%">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="菜单ID">{{ currentDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="菜单名称">{{ currentDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="图标">
          <i :class="currentDetail.icon" v-if="currentDetail.icon"></i>
          <span v-else>-</span>
        </el-descriptions-item>
        <el-descriptions-item label="路由路径">{{ currentDetail.path }}</el-descriptions-item>
        <el-descriptions-item label="父菜单ID">{{ currentDetail.parentId || '无' }}</el-descriptions-item>
        <el-descriptions-item label="排序">{{ currentDetail.sort }}</el-descriptions-item>
        <!-- 在 el-dialog 的 el-descriptions 中添加 -->
        <el-descriptions-item label="是否隐藏">
          <el-tag :type="currentDetail.hidden ? 'danger' : 'success'">
            {{ currentDetail.hidden ? '隐藏' : '显示' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ currentDetail.createdTime }}</el-descriptions-item>

        <el-descriptions-item label="子菜单">
          <MenuTree :data="currentDetail1" @edit="handleEdit" @detail="handleDetail" />
        </el-descriptions-item>

      </el-descriptions>
    </el-dialog>



    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :current-page="menuStore.pageInfo.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="menuStore.pageInfo.size"
          :total="menuStore.pageInfo.total"
          @current-change="handleCurrentChange"
          @size-change="(val) => { menuStore.updatePageInfo({ size: val }); loadMenuList() }"
      />
    </div>

    <!-- 菜单编辑对话框 -->
    <MenuEdit ref="menuEditRef" @success="loadMenuList" />
  </div>
</template>

<style scoped>
.menutable {
  width: 100%;
  min-width: 1200px; /* 根据实际内容调整 */

}
.menu-container {
  padding: 10px;
  margin: 0 auto;
}
.search-card {
  margin-bottom: 10px;
}
.pagination-container {
  margin-top: 20px;
  padding: 16px;
  background: #fff;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
</style>